<template>
	<view class="page-container">
		<!-- 顶部部导航栏 -->
		<u-navbar bgColor="#F5F9FC" :placeholder="true">
			<view slot="left" class="navbar-left">
				<navigator url="/pageNew/pages/employee/index" class="back-navigator">
					<view class="back-content">
						<u-icon color="#1e88e5" name="arrow-left"></u-icon>
						<text class="navbar-title">添加员工</text>
					</view>
				</navigator>
			</view>
		</u-navbar>

		<!-- 主内容区 -->
		<view class="content-container">
			<view class="form-card">
				<form class="employee-form" @submit.prevent="saveEmployee">
					<input type="hidden" class="hidden-input" v-model="newEmployee.id">

					<!-- 基本信息表单 -->
					<view class="form-section">
						<!-- 姓名 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">姓名</text>
									<text class="required-star">*</text>
								</view>
								<input type="text" class="text-input" placeholder="请输入姓名" v-model="newEmployee.name"
									required>
							</view>
						</view>

						<!-- 证件号码 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">身份证号</text>
									<text class="required-star">*</text>
								</view>
								<input type="text" class="text-input" placeholder="请输入身份证号" v-model="newEmployee.idCard"
									required>
							</view>
						</view>

						<!-- 性别 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">性别</text>
									<text class="required-star">*</text>
								</view>
								<picker class="picker-field" mode="selector" :range="genders" v-model="selectedGender"
									@change="onGenderChange">
									<view class="picker-display">
										{{ selectedGender === -1 ? '请选择' : genders[selectedGender] }}
									</view>
								</picker>
							</view>
						</view>

						<!-- 手机号码 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">手机号码</text>
									<text class="required-star">*</text>
								</view>
								<input type="tel" class="text-input" placeholder="请输入手机号码" v-model="newEmployee.phone"
									required>
							</view>
						</view>

						<!-- 员工类型 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">员工类型</text>
									<text class="required-star">*</text>
								</view>
								<picker class="picker-field" mode="selector" :range="employeeTypes" range-key="label"
									v-model="selectedEmployeeType" @change="onEmployeeTypeChange">
									<view class="picker-display">
										{{ selectedEmployeeType === -1 ? '请选择' : employeeTypes[selectedEmployeeType].label }}
									</view>
								</picker>
							</view>
						</view>

						<!-- 工号 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">员工编号</text>
									<text class="required-star">*</text>
								</view>
								<input type="text" class="text-input" placeholder="请输入员工编号"
									v-model="newEmployee.employeeNo" required>
							</view>
						</view>

						<!-- 部门 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">部门</text>
									<text class="required-star">*</text>
								</view>
								<picker class="picker-field" mode="selector" :range="departments" range-key="label"
									v-model="selectedDepartment" @change="onDepartmentChange">
									<view class="picker-display">
										{{ selectedDepartment === -1 ? '请选择' : departments[selectedDepartment].label }}
									</view>
								</picker>
							</view>
						</view>

						<!-- 职位 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">职位</text>
									<text class="required-star">*</text>
								</view>
								<input type="text" class="text-input" placeholder="请输入职位" v-model="newEmployee.position"
									required>
							</view>
						</view>

						<!-- 入职日期 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">入职日期</text>
									<text class="required-star">*</text>
								</view>
								<picker mode="date" class="date-picker" start="2010-01-01" :end="currentDate"
									:value="newEmployee.hireDate" @change="onHireDateChange">
									<view class="picker-display">
										{{ newEmployee.hireDate || '请选择日期' }}
									</view>
								</picker>
							</view>
						</view>

						<!-- 试用期 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">试用期(月)</text>
									<text class="required-star">*</text>
								</view>
								<input type="number" class="text-input" placeholder="请输入试用期"
									v-model.number="newEmployee.probation" required>
							</view>
						</view>

						<!-- 联系地址 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">联系地址</text>
									<text class="required-star">*</text>
								</view>
								<input type="text" class="text-input" placeholder="请输入联系地址"
									v-model="newEmployee.address" required>
							</view>
						</view>

						<!-- 备注 -->
						<view class="form-row">
							<view class="form-field textarea-field-wrapper">
								<view class="label-wrapper">
									<text class="field-label">备注</text>
								</view>
								<textarea class="textarea-field" placeholder="请输入备注信息" v-model="newEmployee.remark"
									rows="3"></textarea>
							</view>
						</view>
					</view>

					<!-- 五险一金信息 -->
					<!-- 五险一金信息（修改为扁平字段绑定） -->
					<view class="form-section">
						<view class="section-title">
							<text class="title-text">五险一金</text>
						</view>

						<!-- 缴纳社保开关 -->
						<view class="form-row switch-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">缴纳社保</text>
								</view>
								<view class="switch-container">
									<u-switch v-model="newEmployee.socialInsuranceEnable"
										@change="onSocialInsuranceChange" active-color="#409EFF"></u-switch>
								</view>
							</view>
						</view>

						<!-- 社保基数 -->
						<view class="form-row" v-if="newEmployee.socialInsuranceEnable">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">社保基数</text>
								</view>
								<input type="number" class="text-input" placeholder="请输入社保基数"
									v-model="newEmployee.socialInsuranceBase">
							</view>
						</view>

						<!-- 养老保险比例 -->
						<view class="form-row" v-if="newEmployee.socialInsuranceEnable">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">养老保险</text>
								</view>
								<view class="percentage-input-container">
									<input type="number" class="percentage-input" placeholder="0.00"
										v-model="newEmployee.pensionPercentage" step="0.01">
									<text class="percentage-sign">%</text>
								</view>
							</view>
						</view>

						<!-- 医疗保险比例 -->
						<view class="form-row" v-if="newEmployee.socialInsuranceEnable">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">医疗保险</text>
								</view>
								<view class="percentage-input-container">
									<input type="number" class="percentage-input" placeholder="0.00"
										v-model="newEmployee.medicalPercentage" step="0.01">
									<text class="percentage-sign">%</text>
								</view>
							</view>
						</view>

						<!-- 失业保险比例 -->
						<view class="form-row" v-if="newEmployee.socialInsuranceEnable">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">失业保险</text>
								</view>
								<view class="percentage-input-container">
									<input type="number" class="percentage-input" placeholder="0.00"
										v-model="newEmployee.unemploymentPercentage" step="0.01">
									<text class="percentage-sign">%</text>
								</view>
							</view>
						</view>

						<!-- 工伤保险比例 -->
						<view class="form-row" v-if="newEmployee.socialInsuranceEnable">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">工伤保险</text>
								</view>
								<view class="percentage-input-container">
									<input type="number" class="percentage-input" placeholder="0.00"
										v-model="newEmployee.injuryPercentage" step="0.01">
									<text class="percentage-sign">%</text>
								</view>
							</view>
						</view>

						<!-- 生育保险比例 -->
						<view class="form-row" v-if="newEmployee.socialInsuranceEnable">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">生育保险</text>
								</view>
								<view class="percentage-input-container">
									<input type="number" class="percentage-input" placeholder="0.00"
										v-model="newEmployee.maternityPercentage" step="0.01">
									<text class="percentage-sign">%</text>
								</view>
							</view>
						</view>

						<!-- 缴纳公积金开关 -->
						<view class="form-row switch-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">缴纳公积金</text>
								</view>
								<view class="switch-container">
									<u-switch v-model="newEmployee.fundEnable" @change="onFundChange"
										active-color="#409EFF"></u-switch>
								</view>
							</view>
						</view>

						<!-- 公积金基数 -->
						<view class="form-row" v-if="newEmployee.fundEnable">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">公积金基数</text>
								</view>
								<input type="number" class="text-input" placeholder="请输入公积金基数"
									v-model="newEmployee.fundBase">
							</view>
						</view>

						<!-- 公积金比例 -->
						<view class="form-row" v-if="newEmployee.fundEnable">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">公积金比例</text>
								</view>
								<view class="percentage-input-container">
									<input type="number" class="percentage-input" placeholder="0.00"
										v-model="newEmployee.fundPercentage" step="0.01">
									<text class="percentage-sign">%</text>
								</view>
							</view>
						</view>

						<!-- 生效日期 -->
						<!-- <view class="form-row" v-if="newEmployee.socialInsuranceEnable || newEmployee.fundEnable">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">生效日期</text>
								</view>
								<picker mode="date" class="date-picker" start="2010-01-01" :end="currentDate"
									:value="newEmployee.startDate" @change="onStartDateChange">
									<view class="picker-display">
										{{ newEmployee.startDate || '请选择日期' }}
									</view>
								</picker>
							</view>
						</view>
						<view class="form-row" v-if="newEmployee.socialInsuranceEnable || newEmployee.fundEnable">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">截止日期</text>
								</view>
								<picker mode="date" class="date-picker" start="2010-01-01" :end="currentDate"
									:value="newEmployee.endDate" @change="onEndDateChange">
									<view class="picker-display">
										{{ newEmployee.endDate || '请选择日期' }}
									</view>
								</picker>
							</view>
						</view> -->
					</view>
				</form>
			</view>
		</view>

		<!-- 底部固定按钮区域 -->
		<view class="fixed-bottom-buttons">
			<view class="btn-container">
				<button class="btn save-btn" @click="saveEmployee">
					保存
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addEmployee,
		addEmployeeWithInsurance
	} from "@/api/employee.js";
	export default {
		data() {
			return {
				// 员工基本信息（对应VipEmployeeWithInsuranceDTO）
				newEmployee: {
					companyId: '',
					id: '',
					name: '', // 姓名（必填）
					idCard: '', // 身份证号（必填）
					gender: '', // 性别（必填）
					phone: '', // 手机号码（必填）
					employeeNo: '', // 员工编号（必填）
					department: '', // 部门（必填，存储数字）
					position: '', // 职位（必填）
					hireDate: '', // 入职日期（必填）
					probation: 3, // 试用期（月，必填）
					address: '', // 联系地址（必填）
					employeeType: '', // 员工类型（必填，存储数字）
					remark: '', // 备注
					// 社保信息
					socialInsuranceEnable: false, // 0-关闭 1-开启
					socialInsuranceBase: 0,
					pensionPercentage: 0,
					medicalPercentage: 0,
					unemploymentPercentage: 0,
					injuryPercentage: 0,
					maternityPercentage: 0,
					// 公积金信息
					fundEnable: false, // 0-关闭 1-开启
					fundBase: 0,
					fundPercentage: 0,
					startDate: '',
					endDate: ''
				},
				// 选择器数据源
				genders: ['男', '女', '其他'],
				selectedGender: -1,
				employeeTypes: [{
						value: 1,
						label: '正式员工'
					},
					{
						value: 2,
						label: '劳务派遣'
					},
					{
						value: 3,
						label: '实习生'
					}
				],
				selectedEmployeeType: -1,
				departments: [{
						value: 10,
						label: '人力资源部'
					},
					{
						value: 20,
						label: '财务部'
					},
					{
						value: 30,
						label: '技术部'
					},
					{
						value: 40,
						label: '销售部'
					},
					{
						value: 50,
						label: '运营部'
					}
				],
				selectedDepartment: -1,
				currentDate: this.formatDate(new Date())
			};
		},
		onLoad() {
			console.log('添加员工页面加载完成');
			// 获取公司信息中的ID
			const companyInfo = uni.getStorageSync('companyInfo');
			if (companyInfo && companyInfo.id) {
				this.newEmployee.companyId = companyInfo.id;
			} else {
				uni.showToast({
					title: '未获取到公司信息',
					icon: 'none'
				});
			}
		},
		methods: {
			// 格式化日期为yyyy-MM-dd
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},

			// 性别选择变化
			onGenderChange(e) {
				this.selectedGender = e.detail.value;
				this.newEmployee.gender = this.genders[this.selectedGender];
			},

			// 员工类型选择变化
			onEmployeeTypeChange(e) {
				this.selectedEmployeeType = e.detail.value;
				this.newEmployee.employeeType = this.employeeTypes[this.selectedEmployeeType].value;
			},

			// 部门选择变化
			onDepartmentChange(e) {
				this.selectedDepartment = e.detail.value;
				this.newEmployee.department = this.departments[this.selectedDepartment].value;
			},

			// 入职日期选择变化
			onHireDateChange(e) {
				this.newEmployee.hireDate = e.detail.value;
			},

			// 社保开关变化
			onSocialInsuranceChange(value) {
				this.newEmployee.socialInsuranceEnable = value ? true : false;
				// 关闭时清空社保信息
				if (!value) {
					this.newEmployee.socialInsuranceBase = 0;
					this.newEmployee.pensionPercentage = 0;
					this.newEmployee.medicalPercentage = 0;
					this.newEmployee.unemploymentPercentage = 0;
					this.newEmployee.injuryPercentage = 0;
					this.newEmployee.maternityPercentage = 0;
				} else {
					// 开启时默认设置生效日期为入职日期
					if (!this.newEmployee.startDate) {
						this.newEmployee.startDate = this.newEmployee.hireDate || this.formatDate(new Date());
					}
				}
			},

			// 公积金开关变化
			onFundChange(value) {
				this.newEmployee.fundEnable = value ? true : false;
				// 关闭时清空公积金信息
				if (!value) {
					this.newEmployee.fundBase = 0;
					this.newEmployee.fundPercentage = 0;
				} else {
					// 开启时默认设置生效日期为入职日期
					if (!this.newEmployee.startDate) {
						this.newEmployee.startDate = this.newEmployee.hireDate || this.formatDate(new Date());
					}
				}
			},

			async saveEmployee() {
				// 1. 基本信息验证
				if (!this.newEmployee.companyId || !this.newEmployee.name || !this.newEmployee.idCard ||
					!this.newEmployee.phone || !this.newEmployee.employeeNo ||
					!this.newEmployee.department || !this.newEmployee.position ||
					!this.newEmployee.hireDate || this.selectedGender === -1 ||
					this.selectedEmployeeType === -1 || !this.newEmployee.probation ||
					!this.newEmployee.address) {
					uni.showToast({
						title: '请填写所有必填字段',
						icon: 'none'
					});
					return;
				}

				// 2. 社保信息验证（如果开启）
				if (this.newEmployee.socialInsuranceEnable) {
					if (this.newEmployee.socialInsuranceBase <= 0 ||
						this.newEmployee.pensionPercentage <= 0 ||
						this.newEmployee.medicalPercentage <= 0 ||
						this.newEmployee.unemploymentPercentage <= 0 ||
						this.newEmployee.injuryPercentage <= 0 ||
						this.newEmployee.maternityPercentage <= 0) {
						uni.showToast({
							title: '请完善社保信息（基数和比例需大于0）',
							icon: 'none'
						});
						return;
					}
				}

				// 3. 公积金信息验证（如果开启）
				if (this.newEmployee.fundEnable &&
					(this.newEmployee.fundBase <= 0 || this.newEmployee.fundPercentage <= 0)) {
					uni.showToast({
						title: '请完善公积金信息',
						icon: 'none'
					});
					return;
				}

				// 4. 生效日期验证（如果开启社保或公积金）
				if ((this.newEmployee.socialInsuranceEnable || this.newEmployee.fundEnable) &&
					!this.newEmployee.startDate) {
					uni.showToast({
						title: '请设置社保/公积金生效开始日期',
						icon: 'none'
					});
					return;
				}
				// 2. 关键：转换布尔值为整数（适配后端 Integer 类型）
				const submitData = {
					...this.newEmployee
				}; // 复制一份数据，避免修改原始绑定
				submitData.socialInsuranceEnable = this.newEmployee.socialInsuranceEnable ? 1 : 0;
				submitData.fundEnable = this.newEmployee.fundEnable ? 1 : 0;

				// 新增：处理百分比转换 (输入 1 -> 0.01)
				// 使用 parseFloat 确保值是数字类型，防止字符串导致的错误
				if (submitData.pensionPercentage !== null && submitData.pensionPercentage !== undefined) {
					submitData.pensionPercentage = parseFloat(submitData.pensionPercentage) / 100;
				}
				if (submitData.medicalPercentage !== null && submitData.medicalPercentage !== undefined) {
					submitData.medicalPercentage = parseFloat(submitData.medicalPercentage) / 100;
				}
				if (submitData.unemploymentPercentage !== null && submitData.unemploymentPercentage !== undefined) {
					submitData.unemploymentPercentage = parseFloat(submitData.unemploymentPercentage) / 100;
				}
				if (submitData.injuryPercentage !== null && submitData.injuryPercentage !== undefined) {
					submitData.injuryPercentage = parseFloat(submitData.injuryPercentage) / 100;
				}
				if (submitData.maternityPercentage !== null && submitData.maternityPercentage !== undefined) {
					submitData.maternityPercentage = parseFloat(submitData.maternityPercentage) / 100;
				}
				if (submitData.fundPercentage !== null && submitData.fundPercentage !== undefined) {
					submitData.fundPercentage = parseFloat(submitData.fundPercentage) / 100;
				}
				console.log();
				try {
					const res = await addEmployeeWithInsurance(submitData);
					if (res.code === 200) {
						uni.showToast({
							title: '员工添加成功',
							icon: 'success'
						});
						setTimeout(() => uni.navigateBack(), 1500);
					} else {
						uni.showToast({
							title: '保存失败: ' + (res.msg || '未知错误'),
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('保存失败:', error);
					uni.showToast({
						title: '保存失败，请重试',
						icon: 'none'
					});
				}
				// try {
				// 	// 5. 提交数据
				// 	const res = await addEmployeeWithInsurance(this.newEmployee);
				// 	if (res.code === 200) {
				// 		uni.showToast({
				// 			title: '员工添加成功',
				// 			icon: 'success'
				// 		});
				// 		setTimeout(() => uni.navigateBack(), 1500);
				// 	} else {
				// 		uni.showToast({
				// 			title: '保存失败: ' + (res.msg || '未知错误'),
				// 			icon: 'none'
				// 		});
				// 	}
				// } catch (error) {
				// 	console.error('保存失败:', error);
				// 	uni.showToast({
				// 		title: '保存失败，请重试',
				// 		icon: 'none'
				// 	});
				// }
			}
		}
	};
</script>
<style>
	/* 全局容器样式 */
	.page-container {
		min-height: 100vh;
		background-color: #f9fafb;
		position: relative;
	}

	/* 导航栏样式 */
	.navbar-left {
		display: flex;
		align-items: center;
	}

	.back-navigator {
		display: flex;
		align-items: center;
	}

	.back-content {
		display: flex;
		align-items: center;
	}

	.navbar-title {
		font-size: 16px;
		font-weight: 600;
		color: #1e88e5;
		margin-left: 8px;
	}

	/* 内容容器样式 */
	.content-container {
		margin: 0 auto;
		padding: 16px;
		padding-bottom: 80px;
		/* 预留底部按钮空间 */
		box-sizing: border-box;
	}

	/* 表单卡片样式 */
	.form-card {
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 16px;
	}

	/* 表单基础样式 */
	.employee-form {
		width: 100%;
	}

	.hidden-input {
		display: none;
	}

	.form-section {
		margin-bottom: 24px;
	}

	/* 表单行样式 */
	.form-row {
		margin-bottom: 14px;
		padding: 4px 0;
	}

	.form-field {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
	}

	/* 标签容器 */
	.label-wrapper {
		width: 100px;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		padding-right: 12px;
		box-sizing: border-box;
	}

	/* 字段标签样式 */
	.field-label {
		font-size: 14px;
		color: #6b7280;
	}

	.required-star {
		color: #f44336;
		margin-left: 4px;
	}

	/* 输入框样式 */
	.text-input {
		flex-grow: 1;
		height: 40px;
		padding: 0 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
		box-sizing: border-box;
	}

	.text-input::placeholder {
		color: #9ca3af;
		opacity: 1;
	}

	/* 选择器样式 */
	.picker-field {
		flex-grow: 1;
	}

	.picker-display {
		width: 100%;
		height: 40px;
		line-height: 40px;
		padding: 0 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
		box-sizing: border-box;
	}

	.date-picker {
		flex-grow: 1;
	}

	/* 文本域样式 */
	.textarea-field-wrapper {
		align-items: flex-start;
		padding-top: 8px;
	}

	.textarea-field {
		flex-grow: 1;
		min-height: 80px;
		padding: 8px 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
		resize: vertical;
		box-sizing: border-box;
	}

	/* 底部固定按钮样式 */
	.fixed-bottom-buttons {
		z-index: 9;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		padding: 16px;
		box-sizing: border-box;
		max-width: 750rpx;
		margin: 0 auto;
	}

	.btn-container {
		width: 100%;
	}

	/* 按钮通用样式 */
	.btn {
		width: 100%;
		height: 48px;
		line-height: 48px;
		text-align: center;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 500;
		transition: all 0.2s ease;
	}

	/* 保存按钮样式 */
	.save-btn {
		background-color: #409EFF;
		color: #ffffff;
		border: none;
	}

	.save-btn:active {
		background-color: #337ecc;
	}

	/* 部分标题样式 */
	.section-title {
		margin-bottom: 16px;
	}

	.title-text {
		font-size: 16px;
		font-weight: 600;
		color: #333333;
	}

	/* 开关行样式 */
	.switch-row {
		margin-bottom: 16px;
	}

	.switch-container {
		flex-grow: 1;
		display: flex;
		justify-content: flex-end;
	}

	/* 保险详情样式 */
	.insurance-details,
	.fund-details {
		margin-left: 16px;
		margin-bottom: 16px;
	}

	/* 百分比输入框样式 */
	.percentage-input-container {
		flex-grow: 1;
		display: flex;
		align-items: center;
	}

	.percentage-input {
		flex-grow: 1;
		height: 40px;
		padding: 0 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
		box-sizing: border-box;
	}

	.percentage-sign {
		margin-left: 8px;
		color: #6b7280;
	}
</style>